<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>账户充值</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">
    	
<!--    <link rel="stylesheet" type="text/css" href="css/StyleForBuyPage.css"/>-->

	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<link rel="stylesheet" type="text/css" href="css/StyleForChargePage.css"/>
	<link rel="stylesheet" type="text/css" href="css/StyleForPayPage.css"/>
	<link rel="stylesheet" type="text/css" href="css/PopUpCSS.css"/>

</head>

<body>
    <div class="navbar">
        <input type="checkbox" id="checkbox">
        <label for="checkbox" class="titleLabel">
            <i class="fa fa-bars" aria-hidden="true">
            	&nbsp;&nbsp;账户充值
            </i>
        </label>
        <ul>
            <div id="icon">
	    		<li>
		            <img :src="user.icon" alt="">
		            <span>欢迎您！{{user.nickname}}</span>
		        </li>
	    	</div>
            <li>
                <a href="Manager-bubble-Homepage.html">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
	            <a href="Manager-HotAd-Page.html">
	                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
	                <span>本月热门</span>
	            </a>
	        </li>
            <li>
                <a href="Manager-Info-Page.html">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <span>个人中心</span>
                </a>
            </li>
            <li>
                <a href="Manager-Buy-Page.html">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    <span>购买广告</span>
                </a>
            </li>
			<li>
				<a href="Manager-user-list.html">
					<i class="fa fa-users" aria-hidden="true"></i>
					<span>用户列表</span>
				</a>
			</li>
			<li>
				<a href="Manager-advlist.html">
					<i class="fa fa-sitemap" aria-hidden="true"></i>
					<span>广告列表</span>
				</a>
			</li>
            <li>
                <a href="Manager-Chat-Page.html">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    <span>聊天窗口</span>
                </a>
            </li>

            <li>
                <a href="javascript:void(0)" onclick="Logout()">
                    <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                    <span>退出登录</span>
                </a>
            </li>
        </ul>
        <div class="main myStyle">
            <!--我是内容区-->
        <div id="charge">
        	<div >
        		<div style="padding-bottom: 50px;">
        			<span class="span1">为 {{user.nickname}} 的钱包充值</span> <br />
        			<span class="span2">您的钱包资金可用于购买本系统上的广告泡。</span> <br />
        			<span class="span2">下订单之前，您有机会检查您的订单。</span> <br />
        		</div>
        		
        		
        		<div class="divCharge">
        			<div>
        				<div style="float: right;">
        					<label>
        						<span class="span3">￥10.00</span>
        						<input type="button" id="btn10" class="btnCharge" value="充值" v-on:click="ChargeMoney(10)" />
        					</label>
        				</div>
        				
        				<span class="span3">充值 ￥10.00</span> <br />
        				<span class="span4">最低资金级别</span>
        			</div>
        			
        		</div>
        		
        		<div class="divCharge">
        			<div>
        				<div style="float: right;">
        					<label>
        						<span class="span3">￥30.00</span>
        						<input type="button" id="btn30" class="btnCharge" value="充值" v-on:click="ChargeMoney(30)" />
        					</label>
        				</div>
        				
        				<span class="span3">充值 ￥30.00</span> <br />
        			</div>
        			
        		</div>
        		
        		<div class="divCharge">
        			<div>
        				<div style="float: right;">
        					<label>
        						<span class="span3">￥50.00</span>
        						<input type="button" id="btn50" class="btnCharge" value="充值" v-on:click="ChargeMoney(50)" />
        					</label>
        				</div>
        				
        				<span class="span3">充值 ￥50.00</span> <br />
        			</div>
        			
        		</div>
        		
        		<div class="divCharge">
        			<div>
        				<div style="float: right;">
        					<label>
        						<span class="span3">￥100.00</span>
        						<input type="button" id="btn100" class="btnCharge" value="充值" v-on:click="ChargeMoney(100)" />
        					</label>
        				</div>
        				
        				<span class="span3">充值 ￥100.00</span> <br />
        			</div>
        			
        		</div>
        		
        		<div class="divCharge">
        			<div>
        				<div style="float: right;">
        					<label>
        						<span class="span3">￥200.00</span>
        						<input type="button" id="btn200" class="btnCharge" value="充值" v-on:click="ChargeMoney(200)" />
        					</label>
        				</div>
        				
        				<span class="span3">充值 ￥200.00</span> <br />
        			</div>
        			
        		</div>
        		
        		<span class="span4">更多详情，请参阅<a href="javascript:void(0)" class="aLabel">《百万圆用户协议》</a>。</span>
        		
        	</div>
                
                
	        <div id="bg-cover" class="bg-cover">

		        	<div id="" class="payDiv modal">

		        		<div>
		        			<input type="button" class="btnEsc" value="×" id="btnEsc" />	
		        			
		        			<!--支付宝-->
		        			<div class="radios">
			        			<label for="alipay" class="p">
			        				<input type="radio" id="alipay" class="radioIcon" name="pay" value="alipay" checked="checked"/> 
				        			<img src="img/other/alipay.png" style="width: 200px;" />
			        			</label>
				        	</div>
				        	<!--微信-->
				        	<div class="radios">
				        		<label for="wechatpay" class="p">
			        				<input type="radio" id="wechatpay" class="radioIcon" name="pay" value="wechatpay"/> 
				        			<img src="img/other/wechatpay.png" style="width: 200px;" />
			        			</label>
				        	</div>
				        			        			
		        			<div class="btnDiv">
		        					<!--<input type="submit" class="btnBtn" value="支付"/>-->
		        					<input type="button" id="btnPay" class="btnBtn" value="支付" v-on:click="Pay"/>
		        					<input type="button" class="btnBtn" value="返回" id="btnBack" />
		        					
		        			</div>
		        			
		        			<div>
		        				<span style="margin-left: 15px;">点击购买将花费 {{money}} 元。</span> <br />
		        				<span style="margin-left: 15px;">下单之前，您有机会检查您的订单。</span>
		        			</div>
		        			
		        		</div>
	        			
		        		
		        	</div>
		
		        </div>
 
     
            
        </div>
        
        </div>
    </div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="js/GetInfo.js"></script>
<script src="js/jquery-1.4.2.js"></script>

<script>
    function Logout() {
        var flag = window.confirm("确定退出登录吗？");
        if (flag) {
            window.location.href = "AdInfo?type=logout";
        }
    }
    
    $(function() {
    	
    	$("#btnBack").click(function() {
				$("#bg-cover").css("display", "none");
		})
    	
    	$("#btnEsc").click(function() {
			$("#bg-cover").css("display", "none");
		})
    	
    	$("#btn10").click(function() {
			$("#bg-cover").css("display", "block");
		})
    	
    	$("#btn30").click(function() {
			$("#bg-cover").css("display", "block");
		})
    	
    	$("#btn50").click(function() {
			$("#bg-cover").css("display", "block");
		})
    	
    	$("#btn100").click(function() {
			$("#bg-cover").css("display", "block");
		})
    	
    	$("#btn200").click(function() {
			$("#bg-cover").css("display", "block");
		})

    })
    
    new Vue({
        el: "#charge",
        data: {
            user: "",
            money: ""
        },
        methods: {
            GetUser() {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/MillionYuan/User?type=user"

                }).then(function (resp) {
                    _this.user = resp.data;
                })
            },
            ChargeMoney(charge) {
            	var _this = this;
            	this.money = charge;
            },
            Pay() {
            	var _this = this;
            	money = _this.money;
            	
    			axios({
            		method: "post",
            		url: "User?type=charge",
            		data: "money="+money
            	}).then(function(resp) {
            		if (resp.data != 0) {
            			alert("充值成功！")
            			window.location.href="Manager-Info-Page.html";
            		}
            	})

            }
        },
        mounted() {
            this.GetUser();

        }
   })
    
    
</script>


</html>